iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Modern Web

30天入門JavaScript系列 第 8

【Day 8】for、while迴圈

  • 分享至 

  • xImage
  •  

延續陣列,假如現在想要把陣列的內容印出來

let expense202009 = [250, 265, 300, 590, 1400, 150, 2000];

console.log('9月的支出:');

console.log('1號:' + expense202009[0] + '元');
console.log('2號:' + expense202009[1] + '元');
console.log('3號:' + expense202009[2] + '元');
console.log('4號:' + expense202009[3] + '元');
console.log('5號:' + expense202009[4] + '元');
console.log('6號:' + expense202009[5] + '元');
console.log('7號:' + expense202009[6] + '元');

...重複的程式碼有點多
這時候就能利用迴圈來執行重複的程式碼

for迴圈

/*語法  for(宣告初始值;判斷式;運算式){
要重複執行的內容
}
*/
//將上面改成for迴圈
for (let i = 0; i < expense202009.length; i++) {
  console.log(i + 1 + '號:' + expense202009[i] + '元');
}
// \^o^/兩行就寫完了

用上面的例子,首先宣告一個i變數初始值為0,
當i比陣列的長度小時,會重複執行大括號內的程式,每次執行完後i會加1,
所以i會從0加到6,並執行內容7次。

使用for迴圈能夠很方便重複執行特定次功能,
下面是簡單的範例,
之前聽過有人資策會上完還不會印99乘法表的都市傳說,
我們來用for迴圈印看看

for (let i = 1; i <= 9; i++) {
  let str = '';

  for (let j = 1; j <= 9; j++) {
    str = str + (i * j < 10 ? '0' : '') + i * j + ' ';
  }
  console.log(str);
  str = '';
}

輸出結果:

while

如果沒有固定執行次數,想要重複執行某段功能的時候能使用while迴圈

while(判斷式){
    要重複執行的內容
}

當判斷式結果為true時,內容就會重複執行。
要注意的是如果一開始的判斷式結果是falsewhile內的內容一次都不會被執行
希望至少執行一次的話可以使用do..while

do{
要重複執行的內容
}
while(判斷式);

這樣會先執行一次後,再用判斷式來決定是否重複執行

break跟continue

之前在switch判斷式時有提到break
如果遇到break時,會立刻結束目前的迴圈。

continue作用跟break類似,
當遇到continue時,會忽略後面的程式碼,直接進行下一輪的迴圈

舉個例子

let arr = ['資料一',10,67,'資料二',true,'資料三','資料四',56,'資料五','停','資料六','資料七'];
let x = 0;
while (x < arr.length) {
  if (arr[x] === '停') {
    break;
  }
  if (typeof arr[x] !== 'string') {
    x++;
    continue;
  }
  console.log(arr[x]);
  x++;
}

如果遇到字串以外的型別就continue來跳過印出,
遇到'停'時則break,結束整個迴圈,後面的值也不會印出。

執行結果

最後是今天的範例,來用while寫個簡單的抽卡模擬器,
SSR機率1%,在抽到SSR前會不停的抽

let count = 0;
let num = 0;
while (num !== 100) {
  count++;
  num = Math.floor(Math.random() * 100) + 1;

  switch (true) {
    case num === 100:
      console.log('第' + count + '抽:SSR');
      break;
    case num < 100 && num >= 90:
      console.log('第' + count + '抽:SR');
      break;
    case num < 90 && num >= 70:
      console.log('第' + count + '抽:R');
      break;
    default:
      console.log('第' + count + '抽:N');
  }
}
console.log('你' + count + '抽才抽到SSR');

執行結果:

(快500抽才抽到好非阿...)


上一篇
【Day 7】陣列(二):各種陣列的處理方法
下一篇
【Day 9】函式(一):函式 function簡介
系列文
30天入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言